<template>
    <div class="customize flex">

        <div class="shrink-0">
            <div class="flex-col">
                <img src="http://demo.jbolt.cn/assets/css/img/mb_head.png" alt="">
                <div class="h-500px flex-col justify-end">
                    <div class="flex items-center">
                        <img class="h-40px w-400px shrink-0" src="http://demo.jbolt.cn/assets/css/img/mb_foot.png" alt="">

                        <div class="absolute flex w-270px" style="margin-left: 53px;">
                            <div class="w-115px h-38px flex justify-center items-center relative shrink-0" :class="index==1?'w-117px':''" style="border: 1px solid #ccc;" v-for="(item,index) in level1List" :key="item.id">

                                <n-tag v-if="item?.name" style="background-color: #fafafa" closable size="large" :bordered="false" class="w-120px text-12px cursor-pointer flex justify-center" @close="handleDelete(item)" @click="handleEdit(item)">
                                    {{item.name}}
                                </n-tag>
                                <jb-btn v-else :icon="Icons.ADD" :bordered="false" @click="handleAddLevel1"></jb-btn>
                                <!--     子项     -->
                                <div class="absolute" style="bottom: 50px;" v-if="item.children">
                                    <n-tag closable size="large" class="mb-3 w-100px flex justify-center" @close="handleDelete(i)" @click="handleEdit(i)" v-for="i  in item.children">
                                        {{i.name}}
                                    </n-tag>
                                    <n-tag v-if="item.children.length<5" type="primary"  size="large" class="mb-2 w-100px flex justify-center" @click="handleAddLevel2(item)">
                                        <jb-icon :icon="Icons.ADD" ></jb-icon>
                                    </n-tag>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

           <div class="flex justify-center mt-20">
               <jb-btn icon="tabler:send" type="primary" @click="handleSubmit">确认将所有菜单同步到公众平台</jb-btn>
           </div>

        </div>

        <n-card v-if="form.id">
            <template #header>
                <div class="flex items-center">
                    <jb-icon :icon="Icons.EDIT"/>
                    <div class="ml-8px text-14px">菜单编辑</div>
                </div>
            </template>
            <n-form
                ref="formRef"
                label-placement="top"
                :label-width="80"
                :model="form"
                :rules="rules"
            >

                <n-form-item label="菜单标题" path="name">
                    <n-input v-model:value="form.name" placeholder="" />
                </n-form-item>
                <n-form-item label="菜单类型">
                    <jb-radio-group
                        v-model:value="form.type"
                        url="/api/admin/wechatMenu/types"
                    ></jb-radio-group>
                </n-form-item>
                <n-form-item v-if="form.type == 'view'" label="URL" path="">
                    <n-input v-model:value="form.value" placeholder="请输入URL" />
                </n-form-item>
                <n-form-item v-else-if="form.type == 'keywords'" label="关键词" path="">
                    <n-input v-model:value="form.value" placeholder="请输入关键词"/>
                </n-form-item>
                <n-form-item v-else-if="form.type == 'click'||form.type=='pic_sysphoto'||form.type=='pic_photo_or_album'||form.type=='pic_weixin'||form.type=='scancode_push'||form.type=='scancode_waitmsg'||form.type=='location_select'" label="事件KEY" path="value">
                    <n-input v-model:value="form.value" placeholder="请输入事件KEY" />
                </n-form-item>
                <n-form-item v-else-if="form.type == 'media_id'" label="素材Media_Id" path="">
                    <n-input v-model:value="form.value" placeholder="请输入素材Media_Id" />
                </n-form-item>
                <n-form-item v-else-if="form.type == 'view_limited'" label="图文URL" path="">
                    <n-input v-model:value="form.value" placeholder="请输入图文URL" />
                </n-form-item>

                <template v-else-if="form.type=='miniprogram'">
                    <n-form-item label="APPID" path="appId">
                        <n-input v-model:value="form.appId" placeholder="请输入APPID" />
                    </n-form-item>
                    <n-form-item label="访问页面路径" path="pagePath">
                        <n-input v-model:value="form.pagePath" placeholder="请输入访问页面路径" />
                    </n-form-item>
                    <n-form-item label="默认URL" path="value">
                        <n-input v-model:value="form.value" placeholder="请输入默认URL" />
                    </n-form-item>
                </template>
                <n-form-item label="当前顺序【1-5】" path="sortRank">
                    <n-input v-model:value="form.sortRank" placeholder="请输入当前顺序【1-5】" />
                </n-form-item>
            </n-form>

            <template #footer>
               <div class="flex justify-end">
                   <jb-btn type="primary" @click="submit">确认提交</jb-btn>
               </div>
            </template>
        </n-card>

        <n-card v-else>
            <template #header>
                <div class="flex items-center">
                    <jb-icon :icon="Icons.EDIT"/>
                    <div class="ml-8px text-14px">菜单编辑</div>
                </div>
            </template>
            <div class="flex justify-center items-center mt-50">
                <n-gradient-text type="error" size="large">
                    <span class="text-26px">请点击选择左侧菜单</span>
                </n-gradient-text>
            </div>
        </n-card>
    </div>
</template>

<script setup lang="ts">
import {Icons} from "@/constants";
import {onMounted, ref} from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'

const props = withDefaults(
    defineProps<{
        id:string
    }>(),
    {
        id:""
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()
interface BucketType {
    id: string
    type: string
    name: string
    mpId: string
    sortRank: string
    pagePath: string
    value:string
    appId: string
}
const form = useResetableData<BucketType>({
    id: '',
    type: 'none',
    pagePath:'',
    name: '',
    sortRank: '',
    mpId: '',
    value:'',
    appId: '',
})
const rules: FormRules = {
    name: new Rules().required('请输入菜单标题').value,
    sortRank: new Rules().required('请输入菜单顺序').value,
    pagePath: new Rules().required('请输入页面路径').value,
    appId: new Rules().required('请输入AppId').value,
    value: new Rules().required('必填项').value
}




function handleEdit(item:any){
    JBoltApi.post(`/api/admin/wechatMenu/${props.id}-${item.id}`).then(({result})=>{
        form._reset({...result.data})
    })
}

function handleDelete(item:any) {
    window.$dialog.warning({
        title: '提示',
        content: '确定此菜单？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            const { error } = await JBoltApi.get(`/api/admin/wechatMenu/delete/${props.id}-${item.id}`)
            if (error) return
            loadLevel1List()
        }
    })

}

function handleAddLevel1(){
    JBoltApi.post(`/api/admin/wechatMenu/save`,{
        mpId:props.id,
        pid:0
    }).then(({result})=>{
        handleEdit(result.data)
        loadLevel1List()
    })
}

function handleAddLevel2(item:any){
    JBoltApi.post(`/api/admin/wechatMenu/save`,{
        mpId:props.id,
        menu:{
            pid:item.id
        }
    }).then(({result})=>{
        handleEdit(result.data)
        loadLevel1List()
    })
}


const level1List = ref()


function loadLevel1List(){
    JBoltApi.get(`/api/admin/wechatMenu/level1List/${props.id}`).then(({result})=>{
        switch (result.data.length) {
            case 0:
               result.data =[{},{},{}]
                break
            case 1:
                result.data = [...result.data,{},{}]
                break
            case 2:
                result.data = [...result.data,{}]
                break
            }

        level1List.value =  result.data
        level1List.value.forEach((item:any)=>{
            if(item.id){
                JBoltApi.get(`/api/admin/wechatMenu/level2List/${props.id}-${item.id}`).then(({result})=>{
                    item.children = result.data
                })
            }

        })
    })
}

function submit() {
    formRef.value?.validate().then(() => {
        JBoltApi.post(`/api/admin/wechatMenu/update`,{mpId:props.id, ...form}).then(()=>{
            loadLevel1List()
        })
    })
}

function handleSubmit() {
    window.$dialog.warning({
        title: '提示',
        content: '确认将所有菜单同步到公众平台？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            const { error } = await JBoltApi.get(`/api/admin/wechatMenu/publish/${props.id}`)
            if (error) return
        }
    })
}

onMounted(()=>{
    loadLevel1List()
})

</script>


<style scoped lang="scss">
.customize{

}


</style>